import { createBrowserRouter, Navigate, Outlet } from "react-router-dom";
import Login from "./pages/auth/Login";
import Register from "./pages/auth/Register";
import App from "./App";
import { ShopLayout } from "./layouts/ShopLayout";
import ShopHome from "./pages/mall/Home";
import Profile from "./pages/mall/Profile";
import Cart from "./pages/mall/Cart";
import Orders from "./pages/mall/Orders";
import Notifications from "./pages/mall/Notifications";
import ProductDetail from "./pages/mall/ProductDetail";
import { useAuth } from "./context/AuthContext";
import { toast } from "sonner";
import OrderConfirm from "./pages/mall/OrderConfirm";
import NetworkError from "./pages/misc/NetworkError";
import Loading from "./pages/misc/Loading";
import { AuthLayout } from "./layouts/AuthLayout";
import MerchantLayout from "./layouts/MerchantLayout";
import MerchantProducts from "./pages/merchant/Products";
import MerchantOrders from "./pages/merchant/Orders";
import Dashboard from "./pages/merchant/dashboard";

// 验证身份的守卫组件
const AuthGuard = ({ children }: { children: React.ReactNode }) => {
  const { isAuthenticated, isLoading, isOffline } = useAuth();

  if (isLoading) {
    return <Loading/>;
  }

  if (isOffline) {
    return <NetworkError/>;
  }

  if (!isAuthenticated) {
    toast.error("验证失败，请重新登录");
    return <Navigate to="/" replace />;
  }

  return <>{children}</>;
};

// 商家身份验证守卫
const MerchantGuard = ({ children }: { children: React.ReactNode }) => {
  const { user, isAuthenticated, isLoading, isOffline } = useAuth();

  if (isLoading) {
    return <Loading/>;
  }

  if (isOffline) {
    return <NetworkError/>;
  }

  if (!isAuthenticated) {
    toast.error("验证失败，请重新登录");
    return <Navigate to="/" replace />;
  }

  if (user?.role !== 'seller') {
    toast.error("您没有商家权限");
    return <Navigate to="/mall" replace />;
  }

  return <>{children}</>;
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/auth",
    element: (
      <AuthLayout>
        <Outlet />
      </AuthLayout>
    ),
    children: [
      {
        index: true,
        element: <Navigate to="/auth/login" replace />,
      },
      {
        path: "login",
        element: <Login />,
      },
      {
        path: "register",
        element: <Register />,
      },
      {
        path: "*",
        element: <Navigate to="/auth/login" replace />,
      },
    ],
  },
  {
    path: "/mall",
    element: (
      <AuthGuard>
        <ShopLayout>
          <Outlet />
        </ShopLayout>
      </AuthGuard>
    ),
    children: [
      {
        index: true,
        element: <ShopHome />,
      },
      {
        path: "profile",
        element: <Profile />,
      },
      {
        path: "cart",
        element: <Cart />,
      },
      {
        path: "orders",
        element: <Orders />,
      },
      {
        path: "notifications",
        element: <Notifications />,
      },
      {
        path: "product/:skuId",
        element: <ProductDetail />,
      },
      {
        path: "order-confirm",
        element: <OrderConfirm />,
      },
      {
        path:"pay",
        element: <div />,
      },
      {
        path: "*",
        element: <Navigate to="/shop" replace />,
      },
    ],
  },


  {
    path: "/merchant",
    element: (
      <MerchantGuard>
        <MerchantLayout />
      </MerchantGuard>
    ),
    children: [
      {
        index: true,
        element: <Navigate to="/merchant/dashboard" replace />,
      },
      {
        path: "dashboard",
        element: <Dashboard />,
      },
      {
        path: "products",
        element: <MerchantProducts />,
      },
      {
        path: "orders",
        element: <MerchantOrders />,
      },
    ],
  },
  {
    path:"test",
    children:[
      {
        path: "loading",
        element: <Loading />,
      },
      {
        path: "network-error",
        element: <NetworkError />,
      }
    ]
  },
  {
    path: "*",
    element: <Navigate to="/" replace />,
  },
]);

export default router;